<template>
  <el-drawer title="入职资料" v-model="visible" size="60%">
    <el-table :data="tableData" max-height="800">
      <el-table-column type="index" label="#" sortable />
      <el-table-column prop="file_type" label="文件类型">
        <template #default="scope">
          <el-select
            style="width: 200px"
            v-model="scope.row.file_type"
            filterable
            allow-create
            default-first-option
            placeholder="选择或输入文件类型"
            :disabled="scope.row.id"
          >
            <el-option
              v-for="item in fileTypes"
              :key="item.id"
              :label="item.type_name"
              :value="item.type_name"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="查看文件">
        <template #default="scope">
          <el-link
            :href="scope.row.file_path"
            type="primary"
            target="_blank"
            v-if="scope.row.file_path"
            >查看文件</el-link
          >
          <el-upload
            class="upload-demo"
            :action="apiUrl + '/upload/file'"
            accept=".doc,.docx,.pdf"
            name="iFile"
            :auto-upload="true"
            :limit="1"
            :data="{ group_id: -1, file_type: 'file' }"
            :headers="{ Token: userStore.token, appid: userStore.app_id }"
            :on-success="
              (response, file, fileList) =>
                handleFile(response, file, fileList, scope.row)
            "
            :on-error="handleFileError"
            :on-remove="handleFileRemove"
            ref="uploadRef"
            v-if="!scope.row.id"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">请上传文件，文件不要超过20M</div>
            </template>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column label="员工确认">
        <template #default="scope">
          <el-image
            :src="scope.row.sign"
            v-if="scope.row.sign"
            style="width: 200px"
            fit="contain"
          ></el-image>
          <el-text v-else>未确认</el-text>
        </template>
      </el-table-column>
      <el-table-column label="添加人员" prop="addUser.real_name" />
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <el-button
            type="danger"
            link
            icon="DeleteFilled"
            @click="delInfo(scope.row.id, scope.$index)"
            v-auth="'staff/edit'"
            v-if="!scope.row.sign"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-20" style="width: 100%" @click="onAddItem">
      添加资料
    </el-button>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getUserOption } from "@/api/user";
import getFileType from "@uppy/utils/lib/getFileType";
import {
  fileTypeApi,
  fileListApi,
  fileSaveApi,
  fileDelApi,
} from "@/api/company/staff";
import useUserStore from "@/store/model/user";
const uploadRef = ref<any>(null);
const apiUrl = import.meta.env.VITE_BASIC_URL;
const userStore = useUserStore();
const tableData = ref<any[]>([]);
const visible = ref(false);
const user_id = ref(0);
const fileTypes = ref<any[]>([]);
function getTableInfo() {
  fileListApi(user_id.value).then((res) => {
    tableData.value = res.data ?? [];
  });
}
function delInfo(id: number, index: number) {
  if (id > 0) {
    ElMessageBox.confirm("确认要删除此文件吗?", "警告！", {
      confirmButtonText: "确认删除",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        fileDelApi(id).then((res: any) => {
          getTableInfo();
          ElMessage({
            type: "success",
            message: "删除成功！",
          });
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "删除已取消",
        });
      });
  } else {
    tableData.value.splice(index, 1);
  }
}
function handleOpen(id: number) {
  user_id.value = id;
  visible.value = true;
  getTableInfo();
}

const onAddItem = () => {
  tableData.value.push({
    user_id: user_id.value,
    file_type: "",
    file_path: "",
    sign: "",
  });
};
const handleFile = (res: any, file: any, fileList: any, row: any) => {
  if (res.code != 1) {
    ElMessage.error(res.msg);
  } else {
    let param = {
      user_id: row.user_id,
      file_type: row.file_type,
      file_path: res.data.file_path,
    };
    fileSaveApi(param).then((res: any) => {
      ElMessage.success("编辑成功");
      uploadRef.value.clearFiles();
      getTableInfo();
      getTypes();
    });
  }
};
const handleFileRemove = (file: any) => {
  console.log(file);
};
const handleFileError = () => {
  ElMessage.error("上传失败");
};
function getTypes() {
  fileTypeApi().then((res: any) => {
    fileTypes.value = res.data;
  });
}
onMounted(() => {
  getTypes();
});
defineExpose({
  handleOpen,
});
</script>

<style scoped>
.table-box {
  height: calc(100% - 200px);
}
</style>
